(function(){
  // 提交评论
  // 获取所需元素
  var main = document.querySelector('#main')
  var commentContainer = main.querySelector('.commentContainer')
  var commentBtn = commentContainer.querySelector('.commentBtn')
  var commentInput = commentContainer.querySelector('.commentInput')
  var commentArea = commentContainer.querySelector('.commentArea')
  var noComment = commentContainer.querySelector('.noComment')
  var oPage = document.querySelector('#page')
  var prev = oPage.querySelector('.prev')
  var next = oPage.querySelector('.next')
  var page = 1

  // 载入页面时获得评论
  window.onload = function() {
    getComments()
  }

  // 评论的提交
  commentBtn.addEventListener('click', postComments, false)

  // 上一页
  prev.addEventListener('click', function() {
    page--
    getComments()
  },false)

  // 下一页
  next.addEventListener('click', function() {
    page++
    getComments()
  },false)

  function getComments() {
    var data = {
      type: 'get',
      url: '/api/comments',
      data: `${window.location.search.slice(1)}`,
      dataType: 'json',
      success: function(result) {
        renderComments(result)
      }
    }
    ajax(data)
  }

  function postComments() {
    var data = {
      type: 'post',
      url: '/api/view/post',
      dataType: 'json',
      data: `${window.location.search.slice(1)}&comment=${commentInput.value}`,
      success: function(result) {
        renderComments(result)
      }
    }
    ajax(data)
  }

  function renderComments (result) {
    noComment.style.display = result.data.comments.length ? 'none' : 'block'
    var comments = result.data.comments.reverse()
    var limit = 3
    var pages = Math.ceil(comments.length / limit)
    var startComments = (page - 1) * limit
    var endComments = page * limit
    var needComments = comments.slice(startComments, endComments)
    var html = ''
    needComments.forEach(function(value, index) {
      html += `
      <li>
        <div class="clearfloat">
          <p>${value.user}</p>
          <span>${format(value.date)}</span>
        </div>
        <div>${value.comment}</div>
      </li>
      `
    })
    commentArea.innerHTML = html
    commentInput.value = ''
    if(page > 1 && page < pages) {
      prev.style.display = 'block'
      next.style.display = 'block'
    }
    else if(page < pages && page == 1) {
      next.style.display = 'block'
      prev.style.display = 'none'
    }
    else if(page > 1 && pages == page) {
      prev.style.display = 'block'
      next.style.display = 'none'
    }
    else {
      prev.style.display = 'none'
      next.style.display = 'none'
    }
  }

  function format(d) {
    var date = new Date(d)
    var year = date.getFullYear() + '.'
    var month = parseInt(date.getMonth()) + 1
    var day = date.getDate()
    var hours = parseInt(date.getHours())
    var minutes = date.getMinutes()
    var seconds = date.getSeconds()
    month = (month > 9 ? month : '0' + month) + '.'
    day = (day > 9 ? day : '0' + day)
    hours = (hours > 9 ? hours : '0' + hours) + ':'
    minutes = (minutes > 9 ? minutes : '0' + minutes) + ':'
    seconds = (seconds > 9 ? seconds : '0' + seconds)
    return year + month + day + ' ' + hours + minutes + seconds
  }
})();
